<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
        <!-- <meta name='viewport' content='initial-scale=1, viewport-fit=cover'> -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>Document</title>
        <style>
        body {
            margin: 0;

            font-family: Helvetica;
            font-size: 16pt;

            -webkit-text-size-adjust: 100%;

            background-color: #eef;
        }

        * {
            box-sizing: border-box;
        }
        body {
                height: 10000px;
            }

            #unsafeArea {
                background: repeating-linear-gradient(45deg, #a40000, #a40000 10px, #cc0000 10px, #cc0000 20px);

                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
            }

            #safeArea {
                background-color: #4e9a06;

                display: flex;
                align-items: center;
                justify-content: center;
                
                position: fixed;
                top: constant(safe-area-inset-top);
                left: constant(safe-area-inset-left);
                right: constant(safe-area-inset-right);
                bottom: constant(safe-area-inset-bottom);
            }

            .horizontalInsetIndicator {
                border-left: 4px solid white;
                border-right: 4px solid white;

                display: flex;
                align-items: center;
                justify-content: center;

                position: fixed;

                top: 45px;
                height: 25px;
            }

            .horizontalInsetIndicator .midline {
                border-top: 2px solid white;
                border-bottom: 2px solid white;
                width: 100%;
                height: 0px;
            }

            .verticalInsetIndicator {
                border-top: 4px solid white;
                border-bottom: 4px solid white;

                display: flex;
                align-items: center;
                justify-content: center;

                position: fixed;

                left: calc(constant(safe-area-inset-left) + 45px);
                width: 25px;
            }

            .verticalInsetIndicator .midline {
                border-left: 2px solid white;
                border-right: 2px solid white;
                width: 0px;
                height: 100%;
            }

            .indicatorLabel {
                position: fixed;
                font-family: monospace;
                font-size: 12pt;
            }

            #leftInsetIndicator {
                left: 0;
                width: constant(safe-area-inset-left);
            }

            #leftInsetIndicator .indicatorLabel {
                left: calc(constant(safe-area-inset-left) + 12px);
            }

            #rightInsetIndicator {
                right: 0;
                width: constant(safe-area-inset-left);
            }

            #rightInsetIndicator .indicatorLabel {
                right: calc(constant(safe-area-inset-right) + 12px);
            }

            #bottomInsetIndicator {
                bottom: 0;
                height: constant(safe-area-inset-bottom);
            }

            #bottomInsetIndicator .indicatorLabel {
                left: calc(constant(safe-area-inset-left) + 12px);
                bottom: calc(constant(safe-area-inset-bottom) + 12px);
            }
        </style>
    </head>
    <body>
        <div id="topBar"><a href="#">Blog</a><a href="#">Photos</a><a href="#">Projects</a></div>
            <div class="post">
            <h1>Welcome</h1>
            <h2>two hours ago</h2>
            <p>Hi!</p>
            <p>Welcome to my sample blog!</p>
            <p>This post is here to help demonstrate how easy it is to take an existing site, along with full-width bars and fixed-position elements, and make it take full advantage of iPhone X's edge-to-edge display.</p>
            <p>The actual post describing how to adopt the new API is over on the <a href="https://webkit.org/blog/7929/designing-websites-for-iphone-x/">WebKit blog</a>.</p>
            <p>There, you will learn all about new WebKit features, including <code>viewport-fit</code>, <code>constant()</code>, safe area insets, and <code>min()</code> and <code>max()</code>.</p>
            <p>I hope that it helps you adopt these new features in your websites.</p>
            </div>
            <div id="bottomBar"><a href="#">About Me</a><a href="#">Contact</a><a href="#">Site Map</a></div>
    </body>
</html>